<template>
    <div class="addProject business-workAdd">
        <div class="Search_Top" v-if="type=='add'">
            <div class="Search_Top_Part">
                <div class="search_list">
                    <div>
                        <div class="input_flex">
                            <el-input v-model="queryForm.boxCode" placeholder="请输入箱码"></el-input>
                        </div>
                    </div>
                </div>
                <div class="search_bt">
                    <span class="zll-search" @click="getList2">搜索</span>
                    <span class="zll-search-reset" @click="searchReset()">重置</span>
                </div>
            </div>
        </div>



        <div class="none" v-if="type=='add'&&!flag">
            <!-- <div v-if="state=='已出库'" class="flexAlignCenter">
                <img src="@/assets/back_manage_img/bs.png" alt="">
                已出库，禁止打印
            </div>
            <div v-if="state=='未入库'" class="flexAlignCenter">
                <img src="@/assets/back_manage_img/bs.png" alt="">
                未入库，禁止打印
            </div> -->
            <div v-if="showImg" class="flexAlignCenter">
                <img src="@/assets/back_manage_img/bs.png" alt="">
                条码无效，请输入正确条码
            </div>

        </div>
        <div v-if="flag||type=='see'" v-loading="loading">
            <div class="top">
                <div class="top_row1">
                    <div class="top_row1_num">{{params.boxCode}}</div>
                    <div v-if="type=='add'" class="top_row1_status s1">
                        已入库</div>
                    <div v-else class="top_row1_status"
                        :class="addForm.codeStatusCn=='订单已出库'||addForm.codeStatusCn=='清理已出库'? 's2':'s1'">
                        {{addForm.codeStatusCn}}</div>
                </div>
                <div style="display: flex;justify-content: space-between">
                    <div class="formRow">
                        <div class="label">
                            打印人:
                        </div>
                        <div class="value">
                            {{params.printUserName}} {{params.printTime}}
                        </div>
                    </div>
                    <!-- <div class="formRow" v-if="status=='已作废'">
                        <div class="label">
                            作废人:
                        </div>
                        <div class="value">
                            张浩 2024-01-01 09:09:09
                        </div>
                    </div> -->
                </div>
                <div class="pr" v-if="type=='add'&&flag" @click="repeatPrint">破损补打</div>

            </div>
            <div class="center">
                <div class="formRow">
                    <div class="label">
                        品类:
                    </div>
                    <div class="value">
                        {{params.itemTypeId || '/'}}
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        规格:
                    </div>
                    <div class="value">
                        {{params.gradeValue|| '/'}}
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        单件万支:
                    </div>
                    <div class="value">
                        {{params.thNumber|| '/'}}
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_left">
                    <div class="bottom_img">
                        <img src="@/assets/back_manage_img/rk.png" alt="">
                        入库
                    </div>
                    <div class="formRow">
                        <div class="label">
                            入库号:
                        </div>
                        <div class="value">
                            {{params.storageCode|| '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            入库类型:
                        </div>
                        <div class="value" v-if="params.codeStatus==2">
                            整理
                        </div>
                        <div class="value" v-else-if="params.codeStatus==3">
                            退货
                        </div>
                        <div class="value" v-else>
                            {{params.storageType || '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            机台号:
                        </div>
                        <div class="value" v-if="params.codeStatus==2||params.codeStatus==3">
                            /
                        </div>
                        <div class="value" v-else>
                            {{params.deviceCode || '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            入库人:
                        </div>
                        <div class="value">
                            {{params.userName|| '/'}}
                        </div>
                    </div>
                </div>
                <div class="bottom_right" v-if="type!=='add'">
                    <div class="bottom_img">
                        <img src="@/assets/back_manage_img/ck.png" alt="">
                        出库
                    </div>
                    <div class="formRow">
                        <div class="label">
                            出库号:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'||params.codeStatus=='7'">
                            {{params.storageOutCode|| '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            出库类型:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'">
                            销售
                        </div>
                        <div class="value" v-else-if="params.codeStatus=='7'">
                            清理
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            订单号:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'||params.codeStatus=='7'">
                            {{params.orderNum|| '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            客户:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'||params.codeStatus=='7'">
                            {{params.customer|| '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            发货单号:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'||params.codeStatus=='7'">
                            {{params.orderOutCode|| '/'}}
                        </div>
                    </div>
                    <div class="formRow">
                        <div class="label">
                            出库人:
                        </div>
                        <div class="value" v-if="params.codeStatus=='6'||params.codeStatus=='7'">
                            {{params.storageOutUser}} {{params.storageOutTime}}
                        </div>
                    </div>
                </div>
            </div>
        </div>





    </div>
</template>
<script>
    import { getStore } from "@/plugins/localStore";
    import { formatDate } from "@/plugins/formatDate";
    export default {
        props: ['editData', 'type'],
        data() {
            return {
                queryForm: {
                    boxCode: ''
                },
                addForm: {
                    boxCode: '',
                    printCode: '',
                    codeStatus: '',
                    codeStatusCn: '',
                    printUserName: '',
                    userName: '',
                },
                rules: {

                },
                time: '',
                flag: false,
                showImg: false,
                state: '',
                params: {

                },
                loading: false,

            }
        },
        methods: {
            repeatPrint() {
                let self = this;


                let printTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
                let params = [{ boxCode: self.queryForm.boxCode, printUserName: getStore().userName, printTime: printTime }];

                self.$http({
                    url: "/jinl/box/updateRepeatPrintBox",
                    method: "post",
                    data: JSON.stringify(params),
                    dataType: 'json',
                    contentType: 'application/json',
                }).then(resp => {
                    if (resp.success) {
                        self.$message.success('打印指令发送成功！');
                        // self.getList();
                        return;
                    }
                    self.$message.error(resp.message);
                });
            },
            getList() {

                // this.flag = true;
                let self = this;
                self.loading = true;
                self.$http({
                    url: "/jinl/box/getBoxManageListById",
                    method: "post",
                    data: JSON.stringify({ boxCode: self.editData.boxCode, type: self.editData.codeStatus }),
                    dataType: 'json',
                    contentType: 'application/json',
                }).then(resp => {
                    self.loading = false;
                    if (resp.success) {
                        this.params = resp.result;
                    } else {
                        self.$message.error(resp.message);
                    }

                });
            },
            getList2() {
                let self = this;

                self.loading = true;
                self.$http({
                    url: "/jinl/box/getReprintListById",
                    method: "post",
                    data: JSON.stringify({ boxCode: self.queryForm.boxCode }),
                    dataType: 'json',
                    contentType: 'application/json',
                }).then(resp => {
                    self.flag = false;
                    if (resp.success) {
                        this.params = resp.result;
                        self.flag = true;
                        self.loading = false;
                    } else {
                        self.$message.error(resp.result.msg);
                        self.showImg = true;
                    }

                });
            },
            searchReset() {
                this.queryForm.boxCode = '';
                this.flag = false;
                this.showImg = false;
            },
            submitForm(val, type) {
                let self = this;
                self.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        self.$eventBus.$emit("updateWorkList");
                    } else {
                        return false;
                    }
                });
            },
        },

        watch: {

            editData(val) {
                this.addForm = val;

                if (this.type == 'add') {
                    // this.getList2();
                } else {
                    this.getList();
                }

            },

        },

        mounted() {

        },
    }
</script>
<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";
    @import "@/style/dialog.scss";

    .Search_Top {
        margin-bottom: 30px;

        .search_list {
            width: 240px !important;

            .input_flex {
                ::v-deep .el-input__inner {
                    text-align: center;
                    width: 220px !important;
                }
            }
        }
    }


    .top_row1,
    .formRow {
        display: flex;
        align-items: center;
    }

    .formRow {
        margin-bottom: 15px;
    }

    .label {
        font-size: 14px;
        color: #808080;
        width: 80px;
    }

    .value {
        font-size: 14px;
        color: #333;
    }

    .top {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #A6A6A6;
        position: relative;

        .pr {
            position: absolute;
            top: 5px;
            right: 30px;
            width: 100px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: #FF5050;
            border-radius: 15px;
            cursor: pointer;
            &:hover {
                opacity: .8;
                transition: all .3s;
            }
        }
        .formRow {
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .top_row1_num {
            font-size: 32px;
        }

        .top_row1_status {
            margin-left: 30px;
            width: 80px;
            height: 25px;
            line-height: 25px;
            border-radius: 15px;
            text-align: center;
        }

        .s0 {
            border: 1px solid #C7601A;
            background-color: #F6E4D9;
            color: #C55A11;
        }

        .s1 {
            border: 1px solid #3BC2F4;
            background-color: #D6F2FD;
            color: #00B0F0;
        }

        .s2 {
            border: 1px solid #15B65E;
            background-color: #D6F2E3;
            color: #00B050;
        }

        .s3 {
            border: 1px solid #848484;
            background-color: #EBEBEB;
            color: #808080;
        }




    }

    .center {
        margin-top: 30px;
    }

    .bottom {
        margin-top: 30px;
        display: flex;
        /* align-items: center; */

        .bottom_left,
        .bottom_right {
            flex: 1;

            .bottom_img {
                color: #1296DE;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 20px;
            }

            img {
                width: 30px;
                margin-right: 10px;
            }
        }
    }

    .none {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100px;
        }
    }

    .flexAlignCenter {
        margin-top: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #999;

        img {
            margin-bottom: 20px;
            width: 50px;
        }
    }
</style>